<template>
  <div class="login-container">
    <h1>登录</h1>
    <form @submit.prevent="login" class="login-form">
      <input v-model="username" placeholder="用户名" class="login-input" />
      <input v-model="password" type="password" placeholder="密码" class="login-input" />
      <button type="submit" class="login-button">登录</button>
    </form>
    <div v-if="loginMessage" class="login-message">{{ loginMessage }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

const username = ref('');
const password = ref('');
const loginMessage = ref('');

const login = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:5000/login', { username: username.value, password: password.value });
    loginMessage.value = response.data.message;
    // 检查特定的用户名和密码
    if (username.value === '2029547877' && password.value === '01245769vbnm..') {
      router.push('AdminAccounts');
    } else {
      router.push('/user');
    }
  } catch (error) {
    if (error.response) {
      loginMessage.value = error.response.data.error;
    } else {
      loginMessage.value = '请求出错，请稍后再试';
    }
  }
};
</script>

<style scoped>
@import '../styles/UserLogin.css';
</style>